<template>
  <app-page :login="false" :cusStyle="{ position: 'relative', zIndex: 1 }">
    <view class="head-box" :style="{ height: `${safeTopHeight + navHeight + 30 + 10}px` }">
      <mxp-navbar :placeholder="true" :showLine="false" titleWidth="0px" :showBack="false" title="">
        <!-- #ifndef MP-TOUTIAO -->
        <template #left>
          <view style="display: flex; flex-direction: row; place-items: center center">
            <image src="@/static/images/logo2.svg" style="width: 30px; height: 30px"></image>
            <text style="font-size: 12px; color: #666666">{{ appInfo?.name || '袋鼠短剧' }}</text>
          </view>
        </template>
        <!-- #endif -->
        <template #right>
          <mxp-search
            background="#ffffff"
            height="30px"
            placeholder="请输入"
            placeholderColor="#998F4B"
            color="#998F4B"
            :cusStyle="{ margin: '15px 0', opacity: 0.6 }"
            :disabled="true"
            @click="onSearch"
          ></mxp-search>
        </template>
      </mxp-navbar>
      <mxp-tabs
        v-model:current="current"
        :list="categoryList"
        activeColor="#998F4B"
        :scroll="true"
        :tabsStyle="{ marginLeft: '30rpx' }"
        width="690rpx"
        :showLine="false"
        height="40px"
        @change="tabsChange"
      ></mxp-tabs>
    </view>
    <!-- 占位 -->
    <view :style="{ height: `${safeTopHeight + navHeight + 30 + 10}px` }"></view>
    <mxp-refresh-page
      ref="mxpRefreshPageRef"
      :reachBottom="true"
      :queryData="queryData"
      :emptyHeight="`${sys.windowHeight - (safeTopHeight + navHeight + 30 + 10)}px`"
    >
      <!-- 第一个 -->
      <view v-if="recommendDramaObj" class="first-box" @click="openVideoDetails(recommendDramaObj)">
        <image class="img" :src="recommendDramaObj.dramaCover"></image>
        <view class="content-box">
          <view style="margin-top: -20px; margin-left: 15px">
            <mxp-image width="140rpx" height="210rpx" borderRadius="10px" :src="recommendDramaObj.dramaCover"></mxp-image>
          </view>
          <view style="display: flex; flex: 1; flex-direction: column; justify-content: center; padding-left: 15px">
            <view class="title-box">
              <text class="title" :style="{ color: defThemeColor.textLight, fontSize: '16px' }">
                {{ recommendDramaObj.dramaTitle }}
              </text>
            </view>
            <view style="display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding-right: 15px; margin-top: 15px">
              <text :style="{ color: defThemeColor.textLight3, fontSize: '12px' }">
                更新至{{ recommendDramaObj.episodeNum }}集 · 共{{ recommendDramaObj.seqNum }}集
              </text>
              <view class="butt-box">
                <image src="/static/public/ico_play_white.svg" style="width: 12px; height: 12px" mode="scaleToFill"></image>
                <text style="font-size: 12px; line-height: 12px; color: #ffffff">立即观看</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 列表 -->
      <view class="episode-list">
        <view v-for="(item, index) in recommendDramaList" :key="index" class="episode-item" @click="openVideoDetails(item)">
          <mxp-image width="210rpx" height="336rpx" borderRadius="10px" :src="item.dramaCover"></mxp-image>
          <view class="info-box">
            <text class="title" :style="{ color: defThemeColor.text }">{{ item.dramaTitle }}</text>
            <text class="info" :style="{ color: defThemeColor.text3 }">共{{ item.seqNum }}集</text>
          </view>
        </view>
      </view>
    </mxp-refresh-page>
  </app-page>
</template>

<script setup lang="ts">
  import { type ChasingDrama, type DramaCategory, type HomeBanner, getDramaCategoryAxios, newDramaListAxios } from '@/api/drama';
  import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
  import MxpImage from '@/mxp-ui/mxp-image/mxp-image.vue';
  import AppPage from '@/components/app-page/app-page.vue';
  import MxpSearch from '@/mxp-ui/mxp-search/mxp-search.vue';
  import { defThemeColor } from '@/mxp-ui/mxp-tool/theme/theme';
  import { type Ref, computed, ref } from 'vue';
  import { openPlayletPage } from '@/utils/page/rest';
  import MxpRefreshPage, { type Ins } from '@/mxp-ui/mxp-refresh-page/mxp-refresh-page.vue';
  import { useRefresh } from '@/mxp-ui/mxp-tool/hooks/useHooksRefresh.ts';
  import MxpNavbar from '@/mxp-ui/mxp-navbar/mxp-navbar.vue';
  import MxpTabs, { type $TabsItem } from '@/mxp-ui/mxp-tabs/mxp-tabs.vue';
  import mxpGetSysInfoStore from '@/mxp-ui/mxp-tool/store/mxp-store-sys-info';
  import { getAppInfo } from '@/config/mp-config';
  import { getHeaderHeight } from '@/mxp-ui/mxp-tool/utils/dom';

  const { mxpRefreshPageRef } = useRefresh(onPullDownRefresh, onReachBottom);

  /** 轮播列表 */
  const recommendDramaObj: Ref<ChasingDrama | null> = ref(null);
  const recommendDramaList: Ref<ChasingDrama[]> = ref([]);
  const categoryList: Ref<($TabsItem & DramaCategory)[]> = ref([]);
  const sys = mxpGetSysInfoStore().getSysInfo();
  const appInfo = getAppInfo();

  /** 顶部安全区高度 */
  const safeTopHeight = computed(() => sys.value.statusBarHeight || 0);
  /** 高度 */
  const navHeight = computed(() => getHeaderHeight(sys.value.statusBarHeight));
  const current = ref(0);
  const categoryName = ref('');

  /** 筛选改变 */
  function tabsChange(index: number) {
    current.value = index;
    const _categoryName = categoryList.value[index]?.categoryName || '';
    categoryName.value = _categoryName === '全部' ? '' : _categoryName;
    mxpRefreshPageRef.value?.initLoadRefresh();
    queryData(mxpRefreshPageRef.value!);
  }

  /**
   * 获取数据
   */
  async function queryData(ins: Ins) {
    console.log('========>Ins', ins);
    if (!mxpRefreshPageRef.value) {
      mxpRefreshPageRef.value = ins as InstanceType<typeof MxpRefreshPage>;
    }
    try {
      const promises: any[] = [newDramaListAxios({ current: ins.page, size: ins.size, categoryName: categoryName.value })];
      ins.page <= 1 && promises.push(getDramaCategoryAxios(true));
      const res = await Promise.all(promises);
      if (ins.page <= 1) {
        recommendDramaObj.value = res[0].data.records[0];
      }
      //  mxpRefreshPageRef.value = mxpRefreshPageRef.value || (ins as InstanceType<typeof MxpRefreshPage>);
      recommendDramaList.value = ins.page > 1 ? recommendDramaList.value.concat(res[0].data.records) : [...res[0].data.records].splice(1);
      if (ins.page <= 1) {
        res[1].data.forEach((item: $TabsItem & DramaCategory) => {
          item.label = item.categoryName;
          item.itemWidth = `${item.categoryName.length * 15 + 10}px`;
        });
        categoryList.value = res[1].data;
      }
      ins.setMoreSuccess(res[0].data.records.length, res[0].data.total);
    } catch (error) {
      console.log('error=======', error);
      ins.setMoreEmpty('fail_load', error.msg || '获取数据失败，BD001');
    }
  }

  /** 搜索 */
  function onSearch() {
    uni.navigateTo({ url: `/pages/drama/drama-search/drama-search` });
  }

  /** 打开视频详情 */
  function openVideoDetails(item: ChasingDrama | (HomeBanner & { dramaId: number })) {
    openPlayletPage(item);
  }
</script>

<style lang="scss" scoped>
  .head-box {
    position: fixed;
    top: 0;
    z-index: 222;
    width: 100vw;
    height: 84px;
    background: #f8f8f8;
  }

  .swiper-public {
    width: 690rpx;
    height: 320rpx;
    overflow: hidden;
    border-radius: 10rpx;
  }

  .first-box {
    position: relative;
    box-sizing: border-box;
    width: 690rpx;
    height: 200rpx;
    margin-top: 25px;
    margin-left: 30rpx;
    border-radius: 10px;

    .img {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 690rpx;
      height: 200rpx;
      border-radius: 10px;
    }

    .content-box {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      flex-flow: row wrap;
      width: 690rpx;
      height: 200rpx;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 10px;
      -webkit-backdrop-filter: blur(30px);
      backdrop-filter: blur(30px);

      .title-box {
        width: 100%;
        overflow: hidden;

        .title {
          display: -webkit-box;
          overflow: hidden;
          font-size: 16px;
          font-weight: bold;
          line-height: 18px;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          line-clamp: 1;
        }
      }

      .butt-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 70px;
        padding: 8px 6px;
        background: linear-gradient(129deg, #fdbf00 0%, #fd6e00 100%);
        border-radius: 20px;
      }
    }
  }

  .episode-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210rpx, 1fr));
    grid-gap: 30rpx;
    place-items: center;
    justify-content: space-between;
    width: 690rpx;
    margin-top: 30rpx;
    margin-left: 30rpx;

    .episode-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 210rpx;
      overflow: hidden;

      .info-box {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 210rpx;
        padding: 0 10px;
        padding-top: 6px;

        .title {
          width: 100%;
          overflow: hidden;
          font-size: 14px;
          font-weight: bold;
          color: #333333;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .info {
          font-size: 12px;
          line-height: 12px;
          color: #666666;
        }
      }
    }
  }
</style>
